<template>
  <div class="page-container" style="width: 99%; margin-top: 15px">
    <el-carousel
      :autoplay="false"
      trigger="click"
      height="690px"
      class="carousel"
      arrow="always"
      @change="carouselChange"
    >
      <el-carousel-item
        class="carousel-item-intro"
        v-for="(item , index) in homeResults.content"
        :key="item.id"
      >
        <el-image
          style="width: 100%; height: 100%"
          :src="require('@/assets/' + item.path)"
          :fit="contain"
          :title="item.title"
          :class="[ index === 0 ? className : '']"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "HomeIntroPanel",
  data() {
    return {
      pageRequest: { pageNum: 1, pageSize: 10 },
      homeResults: {},
      isShow: true,
      counts: 0,
      className: "el-image__inner1",
    };
  },
  methods: {
    // 获取轮播图信息
    getSlideshow() {
      let pageRequest = { pageNum: 1, pageSize: 100 };
      this.$api.home.findPage(pageRequest).then((res) => {
        this.homeResults = res.data;
      });
    },
    carouselChange(index) {  
      //var imageElement = document.getElementsByClassName("el-image__inner"); 
      //console.log(imageElement);

      //imageElement.className ="el-image__inner1";
     
      if (this.counts < 2) {
        this.isShow = true;
        this.counts++;

      } else {
        this.isShow = false;
        this.counts++;
        this.className = "";
      }
    },
  },
  
  mounted() {
    this.getSlideshow();
  },
};
</script>

<style>
.carousel {
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 20px;
}
.carousel h2 {
  color: #475669;
  font-size: 22px;
  opacity: 1.75;
  line-height: 100px;
  margin: 0;
}
.carousel ul {
  color: #475669;
  font-size: 15px;
  opacity: 1.75;
  line-height: 40px;
  margin: 0;
}
.carousel-item-intro h2 {
  color: #ffffff;
  font-size: 22px;
  opacity: 1.75;
  line-height: 80px;
  margin: 0;
}
.carousel-item-intro ul {
  color: #ffffff;
  font-size: 15px;
  opacity: 1.75;
  line-height: 65px;
  padding: 5px;
  margin: 0;
}

.carousel-item-intro img {
  opacity: 0.9;
  filter: alpha(opacity=0.9);
}

.carousel-item-intro {
  background-color: #19aaaf73;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  box-shadow: 0 0 25px #a3b3b965;
}

.carousel-item-intro {
  background-color: #b95e5e;
}

/*左右箭头的样式*/
button.el-carousel__arrow.el-carousel__arrow--left,
button.el-carousel__arrow.el-carousel__arrow--right {
  height: 55px;
  width: 55px;
  font-size: 42px;
}

.el-image__inner1 {
  opacity: 0.9;
  filter: alpha(opacity=0.9);
  /* Chrome, Safari, Opera */
  -webkit-animation: moveit 3s linear 0s inherit normal;

  animation: moveit 3s linear;
  animation-name: moveit;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1; /*infinite*/
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
  
  0% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes moveit {
  0% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}
</style>